<template>
	<view class="content">
		<view class="topButton">
			<icon class="iconfont iconlajixiang lefticon color" type=""  @tap="deleteItem()" v-if="formData.warrantyStatus==0"/>
			<icon class="iconfont iconlajixiang lefticon grey" v-if="formData.warrantyStatus==1"/>
			
			<view  class="button"  @tap="finish()" v-if="formData.warrantyStatus==0">保修卡</view>
			
			<view  class="buttonred" v-if="formData.warrantyStatus==1">开启中,请等待</view>
		</view>
		<view class="already" >
			<view class="cost">
				<view class="row">
					<view class="text">
						{{formData.svcDate? formData.svcDate.split('.')[0].split(':')[0]:'' }}:{{formData.svcDate?formData.svcDate.split('.')[0].split(':')[1]:''}}
					</view>
					<view class="rightText">
						时运高
					</view>
				</view>
			</view>
			<view class="cost">
				<formItem :lable="'费用'" :placeholder="'填写金额'" :type="'number'" :value="formData.svcCost"  :disable="true"
					:objkey="'svcCost'" @child="onchange">
				</formItem>
			</view>
			<view class="form">
				<formItem :lable="'联系人'" :placeholder="'填写联系人'" :type="'text'" :value="formData.liaison" :disable="true"
					:objkey="'liaison'" @change="onchange">
				</formItem>
				<formItem :lable="'电话号码'" :placeholder="'填写电话号码'" :type="'number'" :maxlength="11" :disable="true"
					:value="formData.liaisonPhone" :objkey="'liaisonPhone'" @child="onchange">
				</formItem>
				<view class="formItem f16">
					<view class="text">服务位置</view>
					<view class="f16 tinput" style="color: #555555;">
						{{formData.svcPosition || ''}}
					</view>
					<icon class="iconfont iconweizhi1 hasmap" type="" />
				</view>
				<!-- <formItem :lable="'详细地址'" :placeholder="'填写详细地址'" :type="'number'" :value="formData.fullAddr" :disable="true"
					:objkey="'fullAddr'" @child="onchange">
				</formItem> -->
				<view class="textare f16">
					<view class="fakeInput">
						<view class="text">详细地址</view>
						<!-- <view class="fake">填写更换或维修的内容</view> -->
					</view>
					<view class="textart">
						<textarea :value="formData.fullAddr" placeholder=" " disabled="disabled" class="biginput" />
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>


<script>
	 import formItem from '@/components/formItem/formItem';
	export default {
		components:{
			formItem
		},
		data() {
			return {
				option:'',
				formData:{
					contacts:"",
					phone:"",
					address:"",
					detail:""
				},
				passAddress:"",
				longitude:"",
				latitude:"",
				addsdisplay:"",
				svcRecordId:""
			}
		},
		onLoad(option) {
			console.log(option.svcRecordId)
			this.option=option
			this.svcRecordId = option.svcRecordId
			this.getDetialInfo()
		},
		methods: {
			finish(){
				let that = this
				if(!this.formData.svcCost){
					uni.showModal({
						title: '服务尚未完成，请完成服务后再开启保修卡',
						duration: 2000,
						confirmText: '确定',
						showCancel: false,
						confirmColor: '#ff0000',
						success:()=>{
						}
					})
					return
				}
				uni.showModal({
				    title: '开启保修卡？',
				    duration: 2000,
					confirmText:'确定',
					// showCancel:false,
					confirmColor:'#FF0000',
					success: function (res) {
					        if (res.confirm) {
					            console.log('用户点击确定');
								that.postApi('addCard','POST',{
									data:{
										svcRecordId:that.svcRecordId,
										}
									}).then(res=>{
									if(res.code == 200){
										uni.showToast({
										    title: '开启成功',
										    duration: 2000,
											icon:'success',
											success:()=>{
												setTimeout(()=>{
													uni.switchTab({
													    url: '/pages/index/index'
													});
												},2000)
												
											}
										});
									}
								})
					        } 
					    }
				});
			},
			getDetialInfo(){//获取详情
				this.postApi('detail','GET',{
					data:{svcRecordId:this.svcRecordId},
					loading:true
				}).then(res=>{
					this.formData = res.data
					console.log('已发送详情',this.formData)
				})
			},
			onchange(value,key){
				console.log(value,key)
			},
			getOpenlocation(){
				let that = this
				 wx.chooseLocation({
					success: res => {
					  that.getValueMap(res)
					},
					fail: res => {
					  console.log('打开地图选择位置取消', res)
					}
				  })
			},
			getValueMap(res){
				this.passAddress= res.address + res.name,
				this.longitude= res.longitude,
				this.latitude= res.latitude,
				this.addsdisplay=false
				console.log('res',res)
				this.formData.address = res.name
			},
			deleteItem(){
				let that = this
				uni.showModal({
				    title: '删除本条服务记录 ？',
				    duration: 2000,
					confirmText:'确定',
					confirmColor:'#FF0000',
					success: function (res) {
							console.log('resssss',res)
					        if (res.confirm) {
					            that.postApi('deletesvcRecord','POST',{
									data:{
										svcRecordId:that.svcRecordId,
									}
								}).then(res=>{
									console.log('del',res)
									if(res.code == 200){
										uni.showToast({
										    title: '删除成功',
										    duration: 2000,
											icon:'success',
											success:()=>{
												uni.navigateBack({
													delta:1
												})
											}
										});
									}
								})
					        } 
					    }
				});
			}
		}
	}
</script>

<style lang="less">
	@import '@/common/common.less';
	.content{
		display: flex;
		flex-direction: column;
		height: 100%;
		.topButton{
			height: 104rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			margin-bottom: 17rpx;
			.lefticon{
				margin-left: 40rpx;
				font-size: 18px;
				position: absolute;
				left: 0rpx;
			}
			.color{
				color: @primary-color;
			}
			.grey{
				color: grey;
			}
			.button{
				width: 112rpx;
				height: 60rpx;
				background-color: @primary-color;
				text-align: center;
				line-height: 60rpx;
				margin-right: 33rpx;
				border-radius: 10rpx;
				color: #FFFFFF;
			}
			.buttonred{
				// width: 112rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				margin-right: 33rpx;
				color: #FF0000;
			}
		}
		.already,.send{
			.cost{
				background-color: #FFFFFF;
				margin-bottom: 16rpx;
				.row{
					border-bottom: 1rpx solid #e1e1e1;
					display: flex;
					flex-direction: row;
					padding-left: 39rpx;
					height: 101rpx;
					align-items: center;
					position: relative;
					.rightText{
						position: absolute;
						right: 0;
						margin-right: 33rpx;
						color: #555555;
					}
					.text{
						color: #555555;
						margin-right: 60rpx;
					}
				}
			}
			.form{
				background-color: #FFFFFF;
			}
			.formItem{
				border-bottom: 1rpx solid #e1e1e1;
				display: flex;
				flex-direction: row;
				padding-left: 39rpx;
				height: 101rpx;
				align-items: center;
				position: relative;
				.lefticon{
					margin-right: 28rpx;
					color: @primary-color;
				}
				.text{
					color: #555555;
					margin-right: 60rpx;
					width: 144rpx;
				}
				.hasmap{
					position: absolute;
					right: 35rpx;
					color: @primary-color;
				}
				.tinput{
					width: calc( 95% - 204rpx );
					//padding-right: ;
					overflow:hidden;
					white-space:nowrap;
					text-overflow:ellipsis;
					margin-right: 33rpx;
				}
			}
			.focus{
				border-bottom: 1rpx solid @primary-color;
			}
		}
		.textare{
			border-bottom: 1rpx solid #e1e1e1;
			display: flex;
			flex-direction: column;
			padding-left: 39rpx;
			position: relative;
			background-color: #FFFFFF;
			padding-top: 10rpx;
			padding-bottom:40rpx;
			.fakeInput{
				display: flex;
				flex-direction: row;
				.text{
					margin-right: 20rpx;
					width: auto;
				}
				
			}
			.text{
				color: #555555;
				margin-right: 60rpx;
				width: 144rpx;
			}
			.biginput{
				margin-top:15rpx;
				width: 90%;
				border: 1rpx solid #e1e1e1;
				padding:10rpx;
				min-height: 200rpx;
				color: #555555;
				vertical-align: middle;
			}
		}
		.fake{
			color: #d7d7d7 !important;
		}
	}
	
</style>
